What?

Make a note about the new $ACTION_ properties in the formData

Why?

Since [email protected], some new $ACTION_ properties have appeared in the formData in development mode, which cause validation errors when used with a strict validation with a library such as Zod or Yup:

// Form Client Component
export default function Form() {
  const [state, formAction] = useFormState(action, {
    type: 'initial',
  });

  return (
    <form action={action}>
      {/* ... */}
    </form>
  );
}

// Server Action
export async function action(
  prevState: ServerActionReturnValue,
  formData: FormData,
): Promise<ServerActionReturnValue> {
  const validationResult = await schema.validate(
    Object.fromEntries(formData.entries()),
  );

The errors from Yup:

Errors:

- this field has unspecified keys: $ACTION_REF_1, $ACTION_1:0, $ACTION_1:1, $ACTION_KEY

The data in the formData.entries()

{
  '$ACTION_REF_1': '',
  '$ACTION_1:0': '{"id":"59f475b...","bound":"$@1"}',
  '$ACTION_1:1': '[{"type":"initial"}]',
  '$ACTION_KEY': 'k187677481',
  // Real form data starts here:
  year: '2024',

How?

Document additional properties with keys starting with the prefix $ACTION_

Alternatives Considered

Maybe these $ACTION_ properties are not intended to be exposed to users, and should be stripped before the formData reaches the Server Action.

Related

The documentation was originally introduced in commit 687239c, which was a part of this PR:

• Docs: Update Server Actions Docs #59080

cc @delbaoliveira